// 饼图
<template>
	<div :id="id" style="height:248px;padding:12px;" />
</template>
<script>
    export default {
        name: 'Annular',
        // eslint-disable-next-line vue/require-prop-types
        props: ['id', 'time'],
        data() {
            return {
                echartData: {},
                echartDataMain: [],
                myCharts: null
            }
            
        },
        mounted() {
            this.drawLine()
        },
        methods: {
             drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(this.id))
                
                // 绘制图表
                myChart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '粉丝数波动曲线',
                        left: 16,
                        top: 16,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        type: 'axis'
                    },
                    xAxis: [{
                        type: 'category',
                        data: ["2019-11-27 04:00", "2019-11-27 08:00", "2019-11-27 12:00", "2019-11-27 16:00", "2019-11-27 20:00", "2019-11-28 00:00", "2019-11-28 04:00", "2019-11-28 08:00", "2019-11-28 12:00", "2019-11-28 16:00", "2019-11-28 20:00", "2019-11-29 00:00", "2019-11-29 04:00", "2019-11-29 08:00", "2019-11-29 12:00", "2019-11-29 16:00", "2019-11-29 20:00", "2019-11-30 00:00", "2019-11-30 04:00", "2019-11-30 08:00", "2019-11-30 12:00", "2019-11-30 16:00", "2019-11-30 20:00", "2019-12-01 00:00", "2019-12-01 04:00", "2019-12-01 08:00", "2019-12-01 12:00", "2019-12-01 16:00", "2019-12-01 20:00", "2019-12-02 00:00", "2019-12-02 04:00", "2019-12-02 08:00", "2019-12-02 12:00", "2019-12-02 16:00", "2019-12-02 20:00", "2019-12-03 00:00", "2019-12-03 04:00", "2019-12-03 08:00", "2019-12-03 12:00", "2019-12-03 16:00", "2019-12-03 20:00", "2019-12-04 00:00", "2019-12-04 04:00", "2019-12-04 08:00", "2019-12-04 12:00", "2019-12-04 16:00", "2019-12-04 20:00", "2019-12-05 00:00", "2019-12-05 04:00", "2019-12-05 08:00", "2019-12-05 12:00", "2019-12-05 16:00", "2019-12-05 20:00", "2019-12-06 00:00"],//此处修改为data.data.incrementx_axis_data.
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eee'
                            }
                        },
                        splitArea: {
                            show: true,
                            interval: 1,
                            areaStyle: {
                                color: ['#fff', '#f9f9f9']
                            }
                        }
                    }],
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList;
                                    if (params.data >= 0) {
                                        colorList = '#fe0014';
                                    } else {
                                        colorList = '#137f1a';
                                    }
                                    return colorList;
                                },
                            }
                        },
                        data: [389, 244, 436, 151, 9, 93, 7, -8, -28, -30, -58, -72, -18, -17, -24, -42, -31, -56, -20, -6, -9, -19, -55, -99, -33, -9, -21, -43, -5, -64, 1, -9, 9, -1, -45, -54, -9, -2, 43, 50, -48, -59, -36, -7, 6, -40, -48, -142, -38, -12, -44, -49, -55, -105],//此处修改为data.data.increment.series_data
                    }]
                });
            },
            initCharts() {
                this.chart = this.$echarts.init(document.getElementById(this.id))
                this.setOptions()
            },
            setOptions() {
                this.chart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '年龄分布',
                        x: 'center',
                        top: 16,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        show: true,
                        formatter: "{b}:{c}%"
                    },
                    grid: {
                        left: '6%',
                        top: '15%',
                        right: '6%',
                        bottom: '4%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'value',
                        show: true,
                        position: 'bottom',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eee'
                            }
                        },
                        splitArea: {
                            show: true,
                            interval: 1,
                            areaStyle: {
                                color: ['#fff', '#f9f9f9']
                            }
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        splitLine: { //网格线
                            show: false,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca'
                            }
                        },
                        data: ["1990", "1994", "1992", "1993", "1991", "1989", "1995", "1988", "1996", "1987", "2000", "1986", "1997", "1985", "1998", "2018", "1984", "1999", "1982", "1983"]//此处修改为data.data.x_axis_data
                    }

                    ],
                    series: [{
                        name: '年龄分布',
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#31c7c8',
                            }
                        },
                        data: [8.91, 7.86, 7.31, 7.19, 6.97, 6.81, 6.79, 6.44, 5.27, 4.93, 4.64, 4.22, 3.85, 3.27, 3.08, 2.81, 2.6, 2.38, 2.34, 2.33]//此处修改为data.data.series_data
                    }
                    ]
                })
            }
        }
    }
</script>
